@charset "utf-8";
.web{
    header{
        .navbar-brand{
            padding:7px 15px;
//          按照图片高来确定上下padding
        }
        a:hover{
            color:#fff !important;
        }   
    }
    section{
        .content{
            .game1,.game2{
                .container{
                    background-repeat: no-repeat;
                }
                img{
                    width:303px;
                    margin-bottom: 30px;
                }
                .row:first-child{
                    color: #2a2a2a;
                    font-size: 29px;
                    margin-bottom: 18px;
                }
                .row:nth-child(2){
                    color: #898989;
                    font-size: 12px;
                    p{
                        margin-bottom: 28px;
                    }
                }
                .row:last-child{
                    img{
                        margin-bottom: 0;
                    }
                }
            }
            .game1{
                text-align: right;
                margin-top: 35px;
//              padding-bottom: 20px;
                .container{
                    background-image: url(../images/game/peo1_07.png);
                }
            }
            .game2{
                margin-top:60px;
                .container{
                    background-image: url(../images/game/game2_23.png);
                    background-position: right;
                }
            }
            .gamemor{
                margin-top: 100px;
                font-size: 36px;
                color: #010101;
//              text-align: center;
                .container{
                    .row:first-child{
                        margin-bottom: 36px;
                    }
                    .row{
                        margin-bottom: 45px;
                        img{
                            width:100%;
                            display: block;
                        }
                        p{
                            color:#2a2a2a;
                            font-size: 14px;
                            text-align: center;
                            margin:0;
                            margin-top: 12px;
//                          这个妨碍住我用遮罩层了
                        }
                        .pic-game{
                            position: relative;
                            overflow: hidden;
//                          zhezhao4专属属性
                            .zhezhao{
//                              display: none;
                                position: absolute;
                                top:0;
                                height: 100%;
    //                          background-color: #737373;
                                background-color: rgba(115,115,115,0.51);
                                padding:15px;
                                transform: translateY(-100%);
                                transition: all 800ms linear;
                                p{
                                    font-size: 12px;
                                    color:#ffffff;
                                    text-align: justify;
                                }
                            }
                            &:hover .zhezhao{
                                transform: translateY(0);
//                              transition: all 1000ms linear;
                            }
//                          黑科技上线啦。
                            .zhezhao1{
                                position: absolute;
                                top:0;
                                left:-50%;
                                height: 100%;
                                width:40%;
                                background-color: rgba(115,115,115,0.8);
                                transition: all 800ms linear;
//                              这句话还是重点
                                p{
                                    color:#ffffff;
                                }
                            }
//                          第二种方法.position.实现动画
                            &:hover .zhezhao1{
                                left:0;
                            }
                            .zhezhao2{
                                position: absolute;
                                top:0;
//                              left:50%;
                                left:100%;
                                
//                              这里不能写right.就跟没有转弯的自定义动画一样闪
                                height: 100%;
                                width:40%;
                                background-color: rgba(115,115,200,0.8);
                                transition: all 800ms linear 800ms;
                                p{
                                    color:#ffffff;
                                }
                            }
                            &:hover .zhezhao2{
                                left:60%;
                            }
                            .zhezhao4{
                                position: absolute;
                                bottom:0;
                                height: 35%;
                                background-color: rgba(240,176,176,0.8);
                                transition: all 500ms linear;
//                              overflow: hidden;
                                padding: 9px;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                text-overflow: ellipsis;
                                p{
                                    color:#fff;
//                                  text-align: justify;
                                    margin: 0;
                                }
                            }
                            &:hover .zhezhao4{
                                height:60%;
                                -webkit-line-clamp:999;
                            }
                        }
                        
                    }
                    .row:last-child{
                        margin-bottom: 90px;
                    }
                }
            }
        }
//      小于768隐藏背景
        @media only screen and (max-width: 768px){
            .game1 .container{
                background:none !important;
            }
            .game2 .container{
                background: none !important;
            }
        }
    }
}
